<template>
  <div class="module3">
    <el-card class="box-card" :body-style="{ padding: '18px 0px 5px', boxSizing: 'border-box' }">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :lg="20" class="title"> 最近上线项目 </el-col>
          <el-col :lg="4">
            <el-upload class="upload-demo" action="invalid" :limit="1" :http-request="uploadFile" :show-file-list="false" :file-list="fileList">
              <i class="el-icon-upload icon"></i>
            </el-upload>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" height="513" inline :row-class-name="tableRowClassName">
        <el-table-column label="游戏" prop="name" align="center"> </el-table-column>
        <el-table-column label="平台" prop="platform" align="center"> </el-table-column>
        <el-table-column label="上线时间" prop="" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.reality_date ? scope.row.reality_date : scope.row.target_date }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="" align="center">
          <template slot-scope="scope">
            <el-button @click="searchDeatil(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 详情弹框 -->
    <el-dialog title="项目详情" :visible.sync="dialogFormVisible">
      <el-form :model="detailInfo" inline label-position="right" label-width="160px" disabled>
        <el-form-item label="游戏名" class="wid-44">
          <el-input v-model="detailInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="游戏类型" class="wid-44">
          <el-input v-model="detailInfo.category"></el-input>
        </el-form-item>
        <el-form-item label="游戏评级" class="wid-44">
          <el-input v-model="detailInfo.level"></el-input>
        </el-form-item>
        <el-form-item label="游戏平台" class="wid-44">
          <el-input v-model="detailInfo.platform"></el-input>
        </el-form-item>
        <el-form-item label="情况说明" class="wid-44">
          <el-input v-model="detailInfo.description"></el-input>
        </el-form-item>
        <el-form-item label="分成" class="wid-44">
          <el-input v-model="detailInfo.divide"></el-input>
        </el-form-item>

        <el-form-item label="商务联系人" class="wid-44">
          <el-input v-model="detailInfo.linkman"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" class="wid-44">
          <el-input v-model="detailInfo.phone"></el-input>
        </el-form-item>

        <el-form-item label="研发游戏后台" class="wid-44">
          <el-input v-model="detailInfo.game_admin_url"></el-input>
        </el-form-item>
        <el-form-item label="是否上线" class="wid-44">
          <el-input v-model="detailInfo.is_active"></el-input>
        </el-form-item>

        <el-form-item label="实际上线时间" class="wid-44">
          <el-input v-model="detailInfo.reality_date"></el-input>
        </el-form-item>
        <el-form-item label="目前对接进度" class="wid-44">
          <el-input v-model="detailInfo.schedule"></el-input>
        </el-form-item>
        <el-form-item label="暂定上线时间" class="wid-44">
          <el-input v-model="detailInfo.target_date"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [], // 表格主数据
      detailInfo: {}, // 单个游戏的详情
      fullscreenLoading: false,
      dialogFormVisible: false,
      fileList: [],
    };
  },
  created() {
    this.getState();
  },
  mounted() {},
  methods: {
    // 上传excel
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 自定义上传事件
    uploadFile(e) {
      let formFile = new FormData();
      let imgName = 'file' + (new Date().valueOf() + '').substring((new Date().valueOf() + '').length - 4);
      formFile.append(imgName, e.file);
      this.$api
        .uploadOnlineExcel(formFile)
        .then(res => {
          if (res.code == 0) {
            this.getState();
            this.$message.success(res.msg);
            this.fileList = [];
          }
        })
        .catch(err => {});
    },
    // 获取数据
    getState() {
      this.$api.onlineProjectData().then(res => {
        if (res.code == 0) {
          this.tableData = res.data;
        }
      });
    },
    // 查看详情
    searchDeatil(e) {
      this.detailInfo = e;
      this.dialogFormVisible = true;
    },
    // 列表详情
    tableRowClassName({ row, rowIndex }) {
      // tableRowClassName 中添加得样式，需要全局样式才能有效，否则无效，要么去掉scoped，要么加上深度选择器/deep/
      // 判断是否上线
      if (row.is_active === '否') {
        return 'warning';
      } else {
        return 'success';
      }
    },
  },
};
</script>
<style lang='css' scoped>
body {
}

.title {
  font-weight: 700;
  margin-top: 10px;
}

.icon {
  font-size: 26px;
  margin: 6px 0 0 20px;
  cursor: pointer;
}
.el-upload-list__item {
  display: none;
}
/*  */
/deep/ .el-table .warning {
  background: rgb(236, 218, 175) !important;
}

/deep/ .el-table .success {
  background: #cbeeb9 !important;
}
</style>
